<script setup>
defineOptions({
  name: "table-header"
})
const attrs = useAttrs()
const option = attrs.option
</script>

<template>
  <a-form auto-label-width layout="inline">
    <a-form-item label="是否显示">
      <a-switch size="small" v-model="option.header.isHeader" />
    </a-form-item>
    <a-form-item label="高度">
      <xiri-form v-model="option.header.height" option="number" />
    </a-form-item>
    <a-form-item label="背景颜色">
      <xiri-form v-model="option.header.backgroundColor" option="color" />
    </a-form-item>
    <a-form-item label="字体颜色">
      <xiri-form v-model="option.header.color" option="color" />
    </a-form-item>
    <a-form-item label="字体大小">
      <xiri-form v-model="option.header.fontSize" option="number" />
    </a-form-item>
    <a-form-item label="字体粗细">
      <a-select v-model="option.header.fontWeight" size="small">
        <a-option label="正常" value="normal" />
        <a-option label="粗体" value="bold" />
        <a-option label="细体" value="lighter" />
      </a-select>
    </a-form-item>
    <a-form-item label="字体样式">
      <a-select v-model="option.header.fontStyle" size="small">
        <a-option label="正常" value="normal" />
        <a-option label="斜体" value="italic" />
      </a-select>
    </a-form-item>
    <a-form-item label="对齐方式">
      <a-select v-model="option.header.textAlign" size="small">
        <a-option label="左对齐" value="left" />
        <a-option label="居中" value="center" />
        <a-option label="右对齐" value="right" />
      </a-select>
    </a-form-item>
  </a-form>
</template>

<style scoped lang="less"></style>
